import React ,{useEffect, useState } from 'react';
import { Menu, Dropdown, Button, message, Space, Tooltip } from 'antd';
import { withRouter,Link} from 'react-router-dom';
import { connect } from 'react-redux';
import { DownOutlined,NumberOutlined,SettingOutlined,LeftCircleOutlined,RightCircleOutlined,RollbackOutlined} from '@ant-design/icons';
import { Carousel, Modal } from 'antd';
import { EnvironmentTwoTone } from '@ant-design/icons';
import pg2 from '../../../../assets/pg2.png'
import pg3 from '../../../../assets/pg3.png'
import './index.css'
import ReactDOM from 'react-dom'
import { Label } from '_bizcharts@3.5.9@bizcharts';
let BMap = window.BMap;

const mapStateToProps = state => {
  return {
  idList: state.equipmentPage.idList,
  backImgList: state.equipmentPage.backImgList,
}}

const mapDispatchToProps = dispatch => {
  return {
    getIdList: dispatch.equipmentPage.getIdList,
    getBackImg: dispatch.equipmentPage.getBackImg,
    setIndex: dispatch.equipmentPage.setState,
    getCurve:dispatch.equipmentPage.getCurve,
    setChoice: dispatch.equipmentPage.setState, 
    getAverageRate: dispatch.equipmentPage.getAverageRate, 
    get2DAnd3D: dispatch.equipmentPage.get2DAnd3D,
    setPosition: dispatch.setFSMMessagePage.setState,
    getOneEquip:dispatch.setFSMMessagePage.getOneEquip,
    getOneUTEquip:dispatch.setUTMessagePage.getOneUTEquip,
    deleteDevice:dispatch.equipmentPage.deleteDevice,
  }
};

// export default connect(
//     mapStateToProps,
//     mapDispatchToProps
// )(withRouter(({idList,getIdList,backImgList,getBackImg}) => {
  
//   const handleonChange = (a,b,c) =>{
//         console.log(a,b,c)
//   }
//   const handleMenuClick= (e) =>{
//         message.info('Click on menu item.');
//         console.log('click', e);
//   }
//   const prev = ()=>{
//         backImgList.prev();
//         console.log('2222')
//     }
//   const next=() =>{
//       backImgList.next();
//       console.log('1111')
//   }
//   const menu3 = (
//     <Menu>
//       <Menu.Item>
//         FSM:2
//       </Menu.Item>
//       <Menu.Item>
//         安装位置：普光#2线#22闸室
//       </Menu.Item>
      
//     </Menu>
//   );
//   const menu = (
//     <Menu onClick={handleMenuClick}>
//       <Menu.Item key="1" icon={<SettingOutlined />}>
//         FSM
//       </Menu.Item>
//       <Menu.Item key="2" icon={<SettingOutlined />}>
//         EMAT
//       </Menu.Item>
//       <Menu.Item key="3" icon={<SettingOutlined />}>
//         PZT
//       </Menu.Item>
//     </Menu>
//   );
//   const menuItems = backImgList.map((item,index)=>{
//     return (
//       <Menu.Item key={item.backImgVO1.id}> {item.backImgVO1.name} </Menu.Item>
//     )
//   }); 
//     const menu1 = (
//       <Menu onClick={handleMenuClick}>
//         {menuItems}
//       </Menu>
//     );
//     useEffect(() => {
//       getIdList();
//       getBackImg();
//     }, []);
//     // useEffect(() => {
      
//     // }, []);
//   return (
//       <div>
//           <div className='backGround'>
//               <Dropdown overlay={menu} className="menuButton">
//               <Button>
//                   类型 <DownOutlined />
//               </Button>
//               </Dropdown>
//               <Dropdown overlay={menu1} className="menuButton">
//               <Button>
//                   编号 <DownOutlined />
//               </Button>
//               </Dropdown>
//               <div className='bSign'>
//               <div key='itemm1'className='box'><i className='b1'><p className='container'>FSM</p></i></div>
//               <div key='itemm2' className='box'><i className='b2'><p className='container'>EMAT</p></i></div>
//               <div key='itemm3' className='box'><i className='b3'><p className='container'>PZT</p></i></div>
//               </div>
//               <Dropdown overlay={menu3} placement="topCenter">
//                 <div className='photoPoint'><div className='name'>F</div></div>
//               </Dropdown>
//               {/* <div className='hot_Maps'>
//                   <div className='hot_Map'>
//                   <div className='left_Button'><LeftCircleOutlined style={{color:'#D3D3D3',fontSize:60+'px'}} onClick={prev}/></div>
//                   <Carousel  ref={dom => { backImgList = dom; }} dots={false} >
                    
//                       <img className='imgs' src={require('../../../../assets/pg1.png')} alt=""/>
                      
//                       <img className='imgs' src={pg2} alt=""/>
//                       <img className='imgs' src={pg3} alt=""/>
//                   </Carousel>
//                   <div className='right_Button'><RightCircleOutlined style={{color:'#D3D3D3',fontSize:60+'px'}} onClick={next}/></div>
//                   </div>
//               </div>
//               <div className='mapsName'>普光111号</div> */}
//               <div>
//               <div
//                 id='allmap'
//                 style={{
//                   width:'100vw',
//                   height:'100vh'
//                 }} />
//               </div>
//           </div>
//       </div>
//   )
// }));
// class AdminHotMap extends React.Component {
//     constructor(props) {
//         super(props);
//         this.state={
//           ids:[],
//         }
//         this.handleMenuClick = this.handleMenuClick.bind(this)
//         this.handleonChange = this.handleonChange.bind(this)
//         // this.handleNext = this.handleNext.bind(this)
//         // this.handlePrev = this.handlePrev.bind(this)
//     }
//     componentDidMount(){
//       const token = localStorage.getItem('token')
//       reqShowNameId(token)
//       .then(res=>{
//         const {data} = res;
//         this.setState({ids:data})
//         console.log(data.length)
//         console.log(this.state.ids)
//       })
//       reqShowAllBackImg(token)
//       .then(res=>{
//         const imgs = res.data;
//         console.log(imgs)
//       })
//     }
    
//     handleonChange(a,b,c){
//         console.log(a,b,c)
//     }
//     handleMenuClick(e) {
//         message.info('Click on menu item.');
//         console.log('click', e);
//     }
//     prev(){
//         this.img.prev();
//         console.log('2222')
//     }
//     next(){
//         this.img.next();
//         console.log('1111')
//     }
//     render() {
//       // let datas = this.props.imgs.map((items,index)=>{
//       //   <div>
//       //     <img src={}/>
//       //   </div>
//       // })
      
        
//     }
// }
const ConfirmModal = (props) => {
  console.log(props);
  return (
    <Modal 
      title="确认框"
      visible={props.visible}
      onOk={props.onOk}
      onCancel={props.onCancel}
    >
      <p>确定要删除设备{props.device.describe}吗？</p>
    </Modal>
  )
}

class AdminHotMap extends React.Component {
  constructor(props) {
        super(props);
        this.handleMenuClick = this.handleMenuClick.bind(this)
        this.handleonChange = this.handleonChange.bind(this)
        // this.handleNext = this.handleNext.bind(this)
        // this.getNameList = this.getNameList.bind(this)
        // this.handlePrev = this.handlePrev.bind(this)
        this.state = {
          equip1:{},
          equip2:{},
          equip3:{},
          equip4:{},
          visible:false,
          device: '',
        }

  }
    
    
    handleonChange(a,b,c){
        console.log(a,b,c)
    }
    handleMenuClick(e) {
        console.log(e)
    }
    prev(){
        this.img.prev();
        console.log('2222')
    }
    next(){
        this.img.next();
        console.log('1111')
    }
    UTrightClickMarker(marker,point,backImg,index,equipIndex) { //UT设备跳转
      const { history, location, setIndex, setChoice, getOneEquip, setPosition,getOneUTEquip } = this.props;
      const equip = this.props.backImgList[index].backImgVo2s[equipIndex];
      var watchDataMarker = (e, ee, marker)  => {  
        console.log(this.props);
        // console.log(e+','+ee);
        // console.log(backImg);
        // console.log(equipIndex);
        setIndex({index:index})
        setIndex({equipIndex:equipIndex})
        equip.choice = 0
        setChoice({equip:equip})
        setChoice({width:500,height:432})
        location.pathname = '/UT/' + backImg.id;
        history.push(location);
      }
      var watchInfoMarker = (e,ee,marker) => {  
        // console.log(equip);
        console.log(equip)
        let tempEquip = {
          equipId: equip.equipId,
          type: equip.type == 'FSM'? 'FSM' : 'UT'
        }
        // console.log(equip); 
        // getOnePosition({positionId: equip.positionId})
        getOneUTEquip(tempEquip)
        setPosition({status: 'edit'})
        setPosition({positionInfo: {
          x: equip.x,
          y: equip.y,
        }})
        
        setTimeout(() => {
          location.pathname = '/admin/setUtMessage';
          history.push(location)
        }, 5000);
        //做ip和position请求
      }
      var deleteEquip = (e,ee,marker) => {
        this.setState({
          visible: true,
          device: equip
        })
      }
      var markerMenu = new BMap.ContextMenu();
      markerMenu.addItem(new BMap.MenuItem('查看设备信息',watchInfoMarker.bind(marker),{width:150,id:'info'}))
      markerMenu.addItem(new BMap.MenuItem('查看设备数据',watchDataMarker.bind(marker),{width:150,id:'data'}))
      markerMenu.addItem(new BMap.MenuItem('删除设备',deleteEquip.bind(marker),{width:150,id:'del'}))
      marker.addContextMenu(markerMenu)
    }

    rightClickMarker(marker,point,backImg,index,equipIndex) {
      const { history, location, setIndex, getCurve, setChoice, getAverageRate, get2DAnd3D, getOneEquip, setPosition, deleteDevice } = this.props;
      const equip = this.props.backImgList[index].backImgVo2s[equipIndex];
      var watchDataMarker = (e, ee, marker)  => {  
        console.log(this.props);
        // console.log(e+','+ee);
        // console.log(backImg);
        // console.log(equipIndex);
        setIndex({index:index})
        setIndex({equipIndex:equipIndex})
        this.setState({
          equip1:{
            equipId: equip.equipId,
            type:1,
            choice:0,
          },
          equip2:{
            equipId: equip.equipId,
            type:2,
            choice:0,
          },
          equip3:{
            equipId: equip.equipId,
            type:3,
            choice:0,
          },
          equip4:{
            equipId: equip.equipId,
            type:4,
            choice:0,
          }
        })
        equip.choice = 0
        const curveEquip = {
          equipId:equip.equipId,
          type:1,
          time:'newTime',
          choice:0
        }
        setChoice({optionData:{}})
        setChoice({equip:equip})
        getCurve(equip)
        getAverageRate(equip)
        setChoice({choice:'all'})
        setChoice({width:500,height:432})
        get2DAnd3D(this.state.equip1)
        get2DAnd3D(this.state.equip2)
        get2DAnd3D(this.state.equip3)
        get2DAnd3D(this.state.equip4)
        location.pathname = '/FSM/' + backImg.id;
        history.push(location);
      }
      var watchInfoMarker = (e,ee,marker) => {  
        // console.log(equip);
        let tempEquip = {
          equipId: equip.equipId,
          type: equip.type == 'FSM'? 'FSM' : 'UT'
        }
        // console.log(equip);
        // getOnePosition({positionId: equip.positionId})
        getOneEquip(tempEquip)
        setPosition({status: 'edit'})
        setPosition({positionInfo: {
          x: equip.x,
          y: equip.y,
        }})
        location.pathname = '/admin/setFsmMessage';
        history.push(location)
        //做ip和position请求
      }
      var watchLtDataMarker = (e,ee,marker) => {  //查看壁厚损失
        // console.log(ee);
        const curveEquip = {
          equipId: equip.equipId,
          type:1,
          time:'newTime',
          choice:1,
        }
        equip.choice = 1;
        setChoice({optionData:{}})
        setChoice({equip:equip})
        getCurve(equip)
        setIndex({index:index})
        setIndex({equipIndex:equipIndex})
        setChoice({choice:'lt'})
        setChoice({width:980,height:600})
        location.pathname = '/FSM/' + backImg.id;
        history.push(location);
      }
      var watchRtDataMarker = (e,ee,marker) => {   //剩余壁厚
        const curveEquip = {
          equipId: equip.equipId,
          type:1,
          time:'newTime',
          choice:2,
        }
        equip.choice = 2;
        setChoice({optionData:{}})
        setChoice({equip:equip})
        getCurve(equip)
        setIndex({index:index})
        setIndex({equipIndex:equipIndex})
        setChoice({choice:'rt'})
        setChoice({width:980,height:600})
        location.pathname = '/FSM/' + backImg.id;
        history.push(location);
      }
      var watchSvDataMarker = (e,ee,marker) => {  
        // console.log(ee);
        const curveEquip = {
          equipId: equip.equipId,
          type:1,
          time:'newTime',
          choice:3,
        }
        equip.choice = 3;
        setChoice({optionData:{}})
        setChoice({equip:equip})
        getCurve(equip)
        setIndex({index:index})
        setIndex({equipIndex:equipIndex})
        setChoice({choice:'sv'})
        setChoice({width:980,height:600})
        location.pathname = '/FSM/' + backImg.id;
        history.push(location);
      }
      var watchAvgDataMarker = (e,ee,marker) =>{  
        // console.log(ee);
        equip.choice = 0;
        getAverageRate(equip)
        setIndex({index:index})
        setIndex({equipIndex:equipIndex})
        setChoice({choice:'avgRate'})
        setChoice({width:980,height:600})
        location.pathname = '/FSM/' + backImg.id;
        history.push(location);
      }
      var deleteEquip = (e,ee,marker) => {
        this.setState({
          visible: true,
          device: equip
        })
      }
      var markerMenu = new BMap.ContextMenu();
      markerMenu.addItem(new BMap.MenuItem('查看设备信息',watchInfoMarker.bind(marker),{width:150,id:'info'}))
      markerMenu.addItem(new BMap.MenuItem('查看设备数据',watchDataMarker.bind(marker),{width:150,id:'data'}))
      markerMenu.addItem(new BMap.MenuItem('查看壁厚损失',watchLtDataMarker.bind(marker),{width:150,id:'lt'}))
      markerMenu.addItem(new BMap.MenuItem('查看剩余壁厚',watchRtDataMarker.bind(marker),{width:150,id:'rt'}))
      markerMenu.addItem(new BMap.MenuItem('查看损失速率',watchSvDataMarker.bind(marker),{width:150,id:'sv'}))
      markerMenu.addItem(new BMap.MenuItem('查看平均损失速率',watchAvgDataMarker.bind(marker),{width:150,id:'avg'}))
      markerMenu.addItem(new BMap.MenuItem('删除设备',deleteEquip.bind(marker),{width:150,id:'del'}))
      marker.addContextMenu(markerMenu)
    }
    
    componentDidUpdate() {
      console.log(this.props.backImgList)
      // if(!this.props.backImgList?.length){
      //   return
      // }
        this.map = new BMap.Map("allmap",{mapType: BMAP_HYBRID_MAP}); // 创建Map实例
        this.map.centerAndZoom("北京", 9); // 初始化地图,设置中心点坐标和地图级别
        this.map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
        this.map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
        this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        // 创建图标
        var blueIcon = new BMap.Icon("http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png", new BMap.Size(23, 25), {
          offset: new BMap.Size(10, 2), // 指定定位位置
          imageOffset: new BMap.Size(0 - 1 * 23, 0 - 1 * 22.5) // 设置图片偏移使用左侧的图片
        //  imageOffset: new BMap.Size(-20, 0 - 1 * 25) // 设置图片偏移使用右侧的图片0-x*25代表使用第x+1张图片
        });
        var redIcon = new BMap.Icon("http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png", new BMap.Size(23, 25), {
          offset: new BMap.Size(10, 2), // 指定定位位置
          imageOffset: new BMap.Size(0 - 2 * 23, 0 - 1 * 22.5) // 设置图片偏移使用左侧的图片
        //  imageOffset: new BMap.Size(-20, 0 - 1 * 25) // 设置图片偏移使用右侧的图片0-x*25代表使用第x+1张图片
        });
        var greenIcon = new BMap.Icon("http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png", new BMap.Size(23, 25), {
          offset: new BMap.Size(10, 2), // 指定定位位置
          imageOffset: new BMap.Size(0 - 0 * 23, 0 - 1 * 22.5) // 设置图片偏移使用左侧的图片
        //  imageOffset: new BMap.Size(-20, 0 - 1 * 25) // 设置图片偏移使用右侧的图片0-x*25代表使用第x+1张图片
        });

        if (this.props.backImgList) {
          this.props.backImgList.map((item, index) => {
            item.backImgVo2s.map((equip, equipIndex) => {
              var pt = new BMap.Point(equip.x,equip.y);
              var marker = new BMap.Marker(pt, {
                icon: equip.type === 'FSM' ? blueIcon : redIcon
              })
              this.map.addOverlay(marker)
              var opts = {
                width: 210,
                height: 125,
                title: '<p>'+equip.describe+'</p>',
                enableMessage: true, //设置允许信息窗发送短息
                message: ''
              }
              var infoWindow = new BMap.InfoWindow("时间:" + equip.showId + "<br>经度:" + equip.x + "<br>纬度:" + equip.y, opts)
              marker.addEventListener('click', function () {  
                console.log('123');
                this.map.openInfoWindow(infoWindow, pt)
              })
              if ( equip.type == 'FSM' ) {
                this.rightClickMarker(marker, pt, item.backImgVO1, index, equipIndex)
              } else {
                this.UTrightClickMarker(marker, pt, item.backImgVO1, index, equipIndex)
              }
              
            })
          })
        }
    }
    componentDidMount(){
        this.props.getIdList();
        this.props.getBackImg();

    }
    onOk() {
      console.log(this.state);
      this.props.deleteDevice({equipId:this.state.device.equipId})
      this.setState({
        visible: false
      })
    }
    onCancel() {
      this.setState({
        visible: false
      })
    }
    // getNameList(){
    //   let a =  this.props.backImgList.map((item,index)=>{
    //    return ( <Menu.Item key={`equip${index}`} icon={<NumberOutlined />}>
    //             {item.backImgVO1.name}
    //     </Menu.Item>)
    //   })
    //   console.log(this.props.backImgList)
    // }
    render() {
      // let datas = this.props.imgs.map((items,index)=>{
      //   <div>
      //     <img src={}/>
      //   </div>
      // }
      let role = localStorage.getItem('role') == '普通用户' ? 'user' : 'admin'
      console.log(role);
      let needName =  this.props.backImgList.map((item,index)=>{
        return ( <Menu.Item key={`equip${index}`} icon={<NumberOutlined />}>
                {item.backImgVO1.name}
        </Menu.Item>)
      })
      const menu3 = (
        <Menu>
          <Menu.Item>
            FSM:2
          </Menu.Item>
          <Menu.Item>
            安装位置：普光#2线#22闸室
          </Menu.Item>
          
        </Menu>
      );
        const menu = (
            <Menu onClick={this.handleMenuClick}>
              <Menu.Item key="1" icon={<SettingOutlined />}>
                FSM
              </Menu.Item>
              <Menu.Item key="2" icon={<SettingOutlined />}>
                EMAT
              </Menu.Item>
              <Menu.Item key="3" icon={<SettingOutlined />}>
                PZT
              </Menu.Item>
            </Menu>
          );
          const menu1 = (
            <Menu onClick={this.handleMenuClick}>
             {needName}
            </Menu>
          );
        return (
            <div>      
                <div className='backGround'> 
                    <Link to={'/'+ role}><Button ><RollbackOutlined />回到首页</Button></Link> 
                    {/* <Dropdown overlay={menu} className="menuButton">
                    <Button>
                        类型 <DownOutlined />
                    </Button>
                    </Dropdown>
                    <Dropdown overlay={menu1} className="menuButton">
                        <Button>
                            编号 <DownOutlined />
                        </Button>
                    </Dropdown> */}
                    <div className='bSign'>
                      <div className='box'><EnvironmentTwoTone  style={{fontSize: '30px'}}  twoToneColor='blue' />FSM</div>
                      <div className='box' style={{margin:' 0 10px '}}><EnvironmentTwoTone  style={{fontSize: '30px'}}  twoToneColor='red' />PZT</div>
                      <div className='box'><EnvironmentTwoTone  style={{fontSize: '30px'}}  twoToneColor='green' />EMAT</div>
                    </div>
                    <div></div>
                    {/* <Dropdown overlay={menu3} placement="topCenter">
                      <div className='photoPoint'><div className='name'>F</div></div>
                    </Dropdown>
                    <div className='hot_Maps'>
                        <div className='hot_Map'>
                        <div className='left_Button'><LeftCircleOutlined style={{color:'#D3D3D3',fontSize:60+'px'}} onClick={this.prev.bind(this)}/></div>
                        <Carousel  ref={dom => { this.img = dom; }} dots={false} >
                            <div >
                            <img className='imgs' src={require('../../../../assets/pg1.png')} alt=""/>
                            </div>
                            <div><img className='imgs' src={pg2} alt=""/></div>
                            <div><img className='imgs' src={pg3} alt=""/></div>
                        </Carousel>
                        <div className='right_Button'><RightCircleOutlined style={{color:'#D3D3D3',fontSize:60+'px'}} onClick={this.next.bind(this)}/></div>
                        </div>
                    </div>
                    <div className='mapsName'>普光111号</div> */}
                    <div
                      id='allmap'
                      style={{
                        width:'80vw',
                        height:'69vh'
                      }} 
                    />
              </div>
              <ConfirmModal
                visible={this.state.visible}
                onOk={this.onOk.bind(this)}
                onCancel={this.onCancel.bind(this)}
                device={this.state.device}
              ></ConfirmModal>
            </div>
        )
    }
}

export default connect( mapStateToProps, mapDispatchToProps)(AdminHotMap)
